<template>
    <div class="add-group">
        <div class="add-group-card">
            <a class="title">新增用户组</a>
            <!--<CheckboxGroup v-model="accessList">
                <template  v-for="(value,key) in menuList">
                    <Checkbox size="large" :label="key+1" style="padding: 10px 0px">{{value.title}}</Checkbox>
                    <br/>
                </template>
            </CheckboxGroup>-->

           <Tree :data="treeList" ref="addTreeRef" show-checkbox></Tree>
            <!--表单-->
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="70">
                <FormItem style="margin-top:10px;" label="用户名"  prop="name">
                    <Input style="width: 300px" clearable v-model="formValidate.name" placeholder="请输入用户名"></Input>
                </FormItem>
            </Form>
            <!--/表单-->
            <Button type="primary" size="large" long :loading="modal_loading" @click="sureAdd">确定</Button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "add-group",
        data(){
            return{
              treeList: [],
              accessList:[],
              formValidate:{
                    name:"",
                },
                ruleValidate:{
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                },
                modal_loading:false
            }
        },
        computed:{
            menuList () {
                return this.$store.state.app.menuList;
            },
        },
        mounted() {
          this.init();
        },
      methods:{
          init() {
            this.getJsonData('Auth/getAllRules').then(res => {
              this.treeList = res.data;
            })
          },

            sureAdd(){

                this.$refs.formValidate.validate((valid) => {
                    if (valid) {
                      this.accessList = this.$refs.addTreeRef.getCheckedNodes().map(item =>item.id);
                        this.sureAccess()
                    } else {
                        //不做处理
                    }
                })
            },
            sureAccess(){
                this.modal_loading=true;
                this.getJsonData("Auth/addGroup",{title:this.formValidate.name,rule:this.accessList.join(",")},true)
                    .then((res)=>{
                        this.modal_loading=false;
                        this.$Message.success(res.msg)
                        setTimeout(()=>{
                            this.$router.back()
                        },800)
                    })
                    .catch(()=>{
                        this.modal_loading=false;
                    })
            },
        }
    }
</script>

<style lang="less">
    @import "./add-group";
</style>
